<template>
  <div>
    <div class="counter_container">{{count}}</div>
    <div>
      <button @click="onClickPlus">+1</button>
      <button>-1</button>
      <button @click="onClickAsync">+1 Async</button>
    </div>
  </div>
</template>

<script>
export default {
  computed:{
    count:function(){
      return this.$store.state.count
    }
  },
  methods:{
    onClickPlus(){
      // console.log(this.$store)
      this.$store.commit("PLUS_ACTION");
    },
    onClickAsync(){
      this.$store.dispatch("PLUS_ACTION")
    }
  }
}
</script>

<style scoped>
.counter_container
{
  width: 100px;
  height: 30px;
  border: 1px solid red;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
</style>